<template>
  <div class="paper-preview">
    <div class="left">
      <div>
        <div class="next-btn">
          <div @click="nextQuestion">下一题</div>
        </div>
        <div class="left-top">
          <div class="ke-flex">
            <div>{{ currentQIndex + 1 }}、</div>
            <div class="question-content"></div>
            <div v-if="!!questionOption && currentQuestion.questionType !== 4 && currentQuestion.questionType !== 5">
              ( {{ currentQuestion.correct }} )
            </div>
          </div>
          <template v-if="!!questionOption">
            <div class="ke-flex" style="margin-bottom: 10px" v-for="(item3, index3) in questionOption" :key="index3">
              <template v-if="currentQuestion.questionType !== 4 && currentQuestion.questionType !== 5">
                <div>{{ item3.prefix }}、</div>
                <div class="question-option-content"></div>
              </template>
            </div>
          </template>
          <div class="question-option"></div>
        </div>
        <div class="left-bottom">
          <template v-if="currentQuestion.questionType === 4">
            <div class="ke-flexjac fill" v-for="(item4, index4) in questionOption" :key="index4">
              <div>{{ index4 + 1 }}、</div>
              <a-input placeholder="请输入答案" v-model="item4.content" />
            </div>
          </template>
          <template v-if="currentQuestion.questionType === 5">
            <div class="short-answer">
              <wangEditor :htmlTwo="currentQuestion.correct" @contentChange="contentChange"></wangEditor>
            </div>
          </template>
        </div>
      </div>
      <template>
        <div></div>
      </template>
    </div>
    <div class="right">
      <div class="tip">
        <div class="ke-flexjac">
          <div class="ke-flexjac" style="margin-right: 20px"><span class="has-answer"></span>已答题</div>
          <div class="ke-flexjac" style="margin-right: 20px"><span class="un-answer"></span>未答题</div>
        </div>
      </div>
      <div class="question-list" v-for="(item, index) in paperData.items" :key="index">
        <div>{{ numberTranToCN(index + 1) }}、 {{ item.name }}</div>
        <div class="ke-flex question-indexs">
          <div v-for="(items2, index2) in item.questions" :key="index2">
            <div
              :class="['item', currentQIndex === index2 && currentTIndex == index ? 'has-answer' : 'un-answer']"
              @click="changeQustion(index, index2)"
            >
              {{ index2 + 1 }}
            </div>
          </div>
        </div>
      </div>
      <div class="submit-btn">
        交卷
      </div>
    </div>
  </div>
</template>
<script>
import { numberTranToCN } from '@/utils/switchNumberToCN.js'
import wangEditor from '@/components/wangEditor/wangEditor.vue'
export default {
  components: { wangEditor },
  data() {
    return {
      paperData: {},
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px'
      },
      currentTIndex: 0,
      questionOption: [],
      currentQuestion: {
        questionType: 0
      },
      correct: '',
      currentQIndex: 0
    }
  },
  methods: {
    numberTranToCN(num) {
      return numberTranToCN(num)
    },
    changeQustion(index, index2) {
      this.currentTIndex = index
      this.currentQIndex = index2
      this.paintQuestion()
    },
    paintQuestion() {
      const item = this.paperData.items[this.currentTIndex].questions[this.currentQIndex]
      this.questionOption = item.items
      this.currentQuestion = item
      console.log(item)
      this.$nextTick(() => {
        const questionContent = document.querySelector('.question-content')
        questionContent.innerHTML = item.title
        if (!!this.questionOption && item.questionType !== 4 && item.questionType !== 5) {
          const questionOptionCt = document.querySelectorAll('.question-option-content')
          this.questionOption.forEach((item, index) => {
            questionOptionCt[index].innerHTML = item.content
          })
        }
      })
    },
    nextQuestion() {
      this.currentQIndex++
      // console.log(this.paperData.items[this.currentTIndex].length,this.currentQIndex)
      if (this.currentQIndex >= this.paperData.items[this.currentTIndex].questions.length) {
        this.currentQIndex = 0
        this.currentTIndex++
        if (this.currentTIndex >= this.paperData.items.length) {
          this.currentTIndex--
          this.currentQIndex = this.paperData.items[this.currentTIndex].questions.length - 1
          return this.$message.info('已经是最后一题了')
        }
      }
      this.paintQuestion()
    },
    contentChange(val) {
      this.currentQuestion.correct = val
    }
  },
  mounted() {
    this.paperData = JSON.parse(localStorage.getItem('paperData'))
    console.log(this.paperData)
    this.paintQuestion()
  }
}
</script>
<style scoped lang="less">
@themeColor: #e0d5cf;
@hasAnser: #2bbf38;
.paper-preview {
  display: flex;
  font-family: sans-serif;
  .has-answer {
    background-color: @hasAnser;
  }
  .un-answer {
    background-color: @themeColor;
  }
  .left {
    flex: 1;
    position: relative;
    .next-btn {
      display: flex;
      justify-content: flex-end;
      margin: 20px;
      div {
        background-color: @themeColor;
        padding: 5px 15px;
        border-radius: 6%;
        cursor: pointer;
      }
    }
    .left-top {
      font-size: 20px;
      padding: 50px;
    }
    .left-bottom {
      .fill {
        padding: 20px 50px;
        font-size: 20px;
      }
      .short-answer {
        width: 100%;
        position: absolute;
        bottom: 0;
      }
    }
  }
  .right {
    position: relative;
    width: 440px;
    height: 100vh;
    overflow-y: auto;
    border-left: 1px solid @themeColor;
    font-size: 18px;
    font-weight: 700;
    .tip {
      display: flex;
      font-size: 15px;
      justify-content: flex-end;
      height: 60px;
      align-items: center;
      span {
        display: inline-block;
        border-radius: 3px;
        width: 15px;
        height: 15px;
        margin-right: 6px;
      }
    }
    .question-list {
      padding: 0 20px;
      .question-indexs {
        margin-bottom: 15px;
        flex-wrap: wrap;
        .item {
          width: 48px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 5%;
          margin: 15px 15px;
          cursor: pointer;
        }
      }
    }
    .submit-btn {
      position: absolute;
      left: 20px;
      bottom: 50px;
      padding: 5px 20px;
      border-radius: 10%;
      color: white;
      background-color: #2bc13b;
      cursor: pointer;
    }
  }
}
</style>
<style scoped>
.question-content >>> input,
.question-content >>> input:focus {
  border: none;
  outline: none;
  cursor: not-allowed;
  pointer-events: none;
  border-bottom: 1px solid #848484;
}
</style>
